<template>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item" v-for="(menu, index) in menuData" :data-id="menu.id" :class="{'layui-nav-itemed': menu.subMenuShow}">
                    <a v-if="menu.subMenuData" @click="menuClick(index)" :href="menu.href || 'javascript:;'">{{ menu.title }}<span class="layui-nav-more"></span></a>
                    <dl v-if="menu.subMenuData" class="layui-nav-child">
                        <dd v-for="subMenu in menu.subMenuData">
                            <router-link :to="'/' + subMenu.href">{{subMenu.name}}</router-link>
                        </dd>
                    </dl>

                    <router-link v-if="!menu.subMenuData" :to="menu.href">{{ menu.title }}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default{
    name: 'uiSideBar',
    data: function(){
        return {
            title: '淘宝排期系统',
            menuData : [
                {
                    id: 1,
                    title: '排期管理',
                    subMenuData: [
                        {name: "排期总览", href: "plan/pandect"},
                        {name: "排期表", href: "plan/schedule_table"},
                        {name: '已排期详情列表', href: "plan/details_list"},
                        {name: '站点产量图', href: "plan/echarts"}
                    ],
                    subMenuShow: true
                },{
                    id: 2,
                    title: '用户管理',
                    subMenuData: [
                        {name: "用户组管理", href: "user/user_group"},
                        {name: "群组管理", href: "user/group"}
                    ],
                    subMenuShow: true
                },{
                    id: 3,
                    title: '站点管理',
                    href: '/site'
                },{
                    id: 4,
                    title: '渠道管理',
                    href: '/channel'
                },{
                    id: 5,
                    title: '品牌商管理',
                    href: '/brand'
                }
            ]
        }
    },
    methods: {
        menuClick : function($index){
            if(typeof this.menuData[$index].subMenuShow != 'undefined'){
                this.menuData[$index].subMenuShow = !this.menuData[$index].subMenuShow;
            }else{
                console.info('跳转')
            }
            
        }
    },
    updated: function(){
        console.info('sideBar update');
    }
}
</script>
<style>
.layui-nav-tree .layui-nav-item .layui-this:hover{color: #fff; background-color: #009688;}
</style>
